<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/shop1/goods"
        active
        text="舞蹈室订单管理"
      />
    </nly-breadcrumb>
    <!-- Main content -->
    <div style="clear: both; padding-left: 10px"></div>
    <div class="content" style="padding-left: 10px">
      <div class="flex">
        <i-col :md="6" :sm="12">
          <Input
            v-model="searchText"
            search
            placeholder="请输入用户昵称查询"
            enter-button="搜索"
            @on-search="search1(searchText)"
          />
        </i-col>
        <Select
          v-model="data2.r_id"
          @on-change="change_adm_area"
          style="width: 200px; margin-left: 26px; margin-right: 26px"
          placeholder="请选择教室"
        >
          <Option :value="0">全部</Option>
          <Option
            v-for="(item, index) in classname"
            :value="item.r_id"
            :key="index"
            >{{ item.r_name }}</Option
          >
        </Select>
        <RadioGroup
          v-model="data2.state"
          @on-change="changeType1"
          style="float: left; margin-left: 20px"
        >
          <Radio :label="4" border>全部</Radio>
          <Radio :label="0" border>未使用</Radio>
          <Radio :label="1" border>已使用</Radio>
          <Radio :label="2" border>已退款</Radio>
        </RadioGroup>
      </div>
      <br />
      <div class="order-table-top" style="clear: both">
        <div style="width: 30%; text-align: center">订单信息</div>
        <div style="width: 30%; text-align: center">收货人信息</div>
        <div style="width: 20%; text-align: center">支付</div>
        <div style="width: 20%; text-align: center">操作</div>
      </div>
      <div class="orderlist-main" v-for="(item, index) in YUList" :key="index">
        <div class="orderlist-top">
          <div>订单号：{{ item.out_trade_no }}</div>
          <div style="margin-left: 16px">{{ item.o_createtime }}</div>
          <div style="margin-left: 16px">
            <Tag color="red" v-if="item.or_isrefund == 0 && item.or_isuse == 0"
              >未使用</Tag
            >
            <Tag
              color="green"
              v-if="item.or_isuse == 1 && item.or_isrefund == 0"
              >已使用</Tag
            >
            <Tag color="primary" v-if="item.or_isrefund == 2">已退款</Tag>
          </div>
        </div>
        <div class="orderlist-body">
          <div class="orderlist-item flex space-between">
            <div class="orderlistleft" style="width: 100%">
              <div class="ordergoods">
                <div
                  style="position: relative; flex-shrink: 0"
                  class="orderlist-item-image"
                >
                  <img
                    :src="item.r_img"
                    class="orderlist-item-img image"
                  />
                </div>
                <div style="margin-left: 16px; margin-top: 10px">
                  <div class="orderlist-item-name goodsname">
                    {{ item.r_name }}
                  </div>
                  <div class="orderlist-item-norm">
                    <div style="margin-bottom:3px;">预约时间：</div>
                    <div v-for="(it, index) in item.mail" :key="index">
                      <Tag color="magenta">{{ it.date }} {{ it.time }}</Tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="orderlist-item-orderlist-consignee">
            <div class="orderlist-user">
              <div class="nickname" :title="item.og_name">
                下单人昵称：{{ item.nickname }}
              </div>
              <div class="nickname" :title="item.og_tel">
                下单人头像：
                <img
                  :src="item.avatar"
                  class="orderlist-item-img avator"
                />
              </div>
            </div>
          </div>
          <div class="orderlist-item-orderlist-actual">
            <div class="orderlist-item-consignee-title">
              <div class>支付金额：￥{{ item.or_price }}</div>
              <div class>下单时间：{{ item.or_pay_time }}</div>
              <div class="actual-price">
                支付方式：{{
                  item.or_pay_type == 1
                    ? "余额支付"
                    : item.or_pay_type == 0
                    ? "微信付款"
                    : "次卡支付"
                }}
              </div>
            </div>
          </div>
          <div class="orderlist-item-orderlist-action">
            <div class="orderlist-item-consignee-orderlist-title2">
              <Button
                style="margin-left: 16px"
                type="warning"
                ghost
                size="small"
                v-if="item.or_isrefund != 2"
                @click="refuseorder(item.out_trade_no)"
                >取消订单</Button
              >
            </div>
          </div>
        </div>
      </div>
      <br />
      <div class="Page">
        <Page
          :total="total1"
          show-elevator
          show-total
          :page-size="data2.pageSize"
          :current="data2.page"
          @on-change="get_page1"
        />
      </div>
      <br />
    </div>
  </div>
</template>

<script>
import apis from "@/api/shop1";
import apiss from "@/api/category";
export default {
  components: {},
  data() {
    return {
      goodType: [], 
      searchText: "",
      total1: 0,
      data2: {
        page: 1,
        pageSize: 10,
        par: "",
        state: 4,
        r_id: 0,
      },

      tableheader2: [
        {
          title: "ID",
          key: "o_id",
          width: 100,
          align: "center",
        },
        {
          title: "下单人名称",
          key: "o_people",
          width: 170,
          align: "center",
        },
        {
          title: "下单人头像",
          slot: "avatar",
          width: 120,
          align: "center",
        },
        {
          title: "电话号码",
          key: "o_tel",
          width: 170,
          align: "center",
        },
        {
          title: "所用金额",
          key: "d_money",
          width: 170,
          align: "center",
        },
        {
          title: "下单数量",
          key: "d_num",
          width: 100,
          align: "center",
        },
        {
          title: "订单号",
          key: "out_trade_no",
          align: "center",
          tooltip: true,
          width: 200,
        },
        {
          title: "商品",
          key: "go_name",
          width: 155,
          align: "center",
        },
        {
          title: "商品图片",
          slot: "go_img",
          width: 120,
          align: "center",
        },

        {
          title: "下单时间",
          key: "o_time",
          width: 180,
          align: "center",
        },
        {
          title: "操作",
          slot: "action",
          width: 170,
          fixed: "right",
          align: "center",
        },
      ],
      YUList: [],
      count_scale: [],
      enteralldata: [],
      classname: [],
    };
  },
  created() {
    this.get_order2();
    this.get_listclass();
  },
  methods: {
    handleExport() {
      apis
        .export({
          par: this.data2.par,
          og_state: this.data2.og_state,
          s_id: this.data2.s_id,
          o_start_time: this.data2.o_start_time,
          o_end_time: this.data2.o_end_time,
        })
        .then((response) => {
          if (response.status == 200) {
            const blob = response.data;
            let a = document.createElement("a");
            let href = window.URL.createObjectURL(blob);
            a.href = href;
            a.download = "订单表.xls";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            window.URL.revokeObjectURL(href);
          }
        });
    },
    startsure(val) {
      console.log(val);
      this.data2.o_start_time = val;
      this.get_order2();
    },
    endsure(val) {
      console.log(val);
      this.data2.o_end_time = val;
      this.get_order2();
    },
    arrSplit(str) {
      if ((str || "").split(",")[0]) {
        return str.split(",")[0];
      } else {
        return "";
      }
    },
    get_listclass() {
      apiss
        .get_listclass()
        .then((response) => {
          if (response.data.code == 200) {
            this.classname = response.data.data;
          } else {
            this.$Message.error("请求错误");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("请求教室列表错误!");
        });
    },
    change_adm_area(val) {
      this.data2.r_id = "";
      this.data2.r_id = val;
      this.get_order2();
    },
    get_order2() {
      apis
        .getroomorder(this.data2)
        .then((response) => {
          if (response.data.code == 200) {
            this.YUList = response.data.data.depts;
            this.total1 = response.data.data.countNumber;
            this.YUList.map((itme) => {
              itme.mail = JSON.parse(itme.or_detail);
            });
            console.log(this.YUList);
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$Message.error("请求失败!");
        });
    },
    get_page1(page) {
      this.data2.page = page;
      this.get_order2();
    },
    changeType1(val) {
      this.data2.page = 1;
      this.data2.state = val;
      console.log(this.data2);
      this.get_order2();
    },
    search1(val) {
      this.data2.page = 1;
      let data2 = this.data2;
      data2.par = val;
      this.get_order2();
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    updateorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单状态改变确认",
        content: `确定改变此订单状态？改变后无法撤回`,
        onOk: () => {
          apis.updateorder({ out_trade_no: order }).then((response) => {
            if (response.data.code == 200) {
              this.$Message.success("成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
    refuseorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单取消确认",
        content: `确定取消此订单？取消后无法撤回`,
        onOk: () => {
          apis.refuseroomorder({ out_trade_no: order }).then((response) => {
            if (response.data.code == 200) {
              apis.refusemoney({ out_trade_no: order }).then((response) => {
                if (response.data.code == 200) {
                  this.$Message.success("取消成功");
                  this.get_order2();
                } else {
                  this.$Message.error("失败");
                }
              });
            } else if (response.data.code == 202) {
              this.$Message.success("取消成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
    sendorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "订单发货确认",
        content: `确定给此订单发货？`,
        onOk: () => {
          apis.sendorder({ out_trade_no: order }).then((response) => {
            if (response.data.code == 200) {
              this.$Message.success("成功");
              this.get_order2();
            } else if (response.data.code == 202) {
              this.$Message.success("成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
    sureorder(order) {
      console.log(order);
      this.$Modal.confirm({
        title: "退货确认",
        content: `确定给此订单退货？`,
        okText: "退货",
        cancelText: "拒绝",
        onOk: () => {
          apis.sureorder({ out_trade_no: order, audit: 0 }).then((response) => {
            if (response.data.code == 200) {
              var _this = this;
              apis.refusemoney({ out_trade_no: order }).then((res) => {
                if (res.data.code == 200) {
                  _this.$Message.success("成功");
                  _this.get_order2();
                }
              });
            } else if (response.data.code == 202) {
              this.$Message.success("成功");
              this.get_order2();
            } else if (response.data.code == 204) {
              this.$Message.success("成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
        onCancel: () => {
          apis.sureorder({ out_trade_no: order, audit: 1 }).then((response) => {
            if (response.data.code == 202) {
              this.$Message.success("拒绝成功");
              this.get_order2();
            } else if (response.data.code == 204) {
              this.$Message.success("成功");
              this.get_order2();
            } else {
              this.$Message.error("失败");
            }
          });
        },
      });
    },
    deleteYU(id) {
      console.log(id);
      let o_id = "";
      if (id) {
        o_id = id;
      } else {
        this.enteralldata.map((itme) => {
          if (o_id == "") {
            o_id = itme.o_id;
          } else {
            o_id += "," + itme.o_id;
          }
        });
      }
      console.log(o_id);
      this.$Modal.confirm({
        title: "删除确认",
        content: `确定删除此订单？删除后无法恢复`,
        onOk: () => {
          apis.deleteYU({ o_id: o_id }).then((response) => {
            if (response.data.code == 200) {
              this.$Message.success("删除成功");
              this.get_order2();
            } else {
              this.$Message.error("删除失败");
            }
          });
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style scoped>
.ivu-btn {
  margin-bottom: 0px;
}
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.booktime {
  width: 220px;
  margin: auto;
}

/* 操作按钮，外层 */
.orderlist-item-orderlist-action {
  width: 20%;
  border-left: 1px solid #f3f5f6;
  position: relative;
}
/* 支付信息字体 */
.actual-price {
  font-size: 15px;
  color: #19be6b;
}
/* 支付信息，外层 */
.orderlist-item-orderlist-actual {
  width: 20%;
  border-left: 1px solid #f3f5f6;
  text-align: center;
  position: relative;
}
/* 支付信息内层 */
.orderlist-item-consignee-orderlist-title2,
.orderlist-item-consignee-title {
  position: absolute;
  left: 38%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
}
.orderlist-item-consignee-title div {
  margin-bottom: 3px;
}
/* 分销商信息 */
.orderlist-item-orderlist-distributor {
  width: 15%;
  border-left: 1px solid #f3f5f6;
  text-align: center;
  font-size: 16px;
  padding: 10px;
  position: relative;
}
/* 操作按钮 */
.orderlist-item-consignee-orderlist-title2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
/* 订单收货人信息，内层 */
.orderlist-user {
  /* max-width: 300px; */
  margin: 2px 20px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
/* 订单收货人信息，外层*/
.orderlist-item-orderlist-consignee {
  width: 30%;
  border-left: 1px solid #f3f5f6;
  text-align: center;
  font-size: 16px;
  padding: 10px;
  position: relative;
}
/* 订单收货人信息，内容*/
.orderlist-user > .nickname {
  line-height: 20px;
  font-size: 14px;
  text-align: left;
  margin-bottom: 6px;
}
/* 订单收货人信息，内容*/
.orderlist-user > .quanbu {
  line-height: 16px;
  font-size: 14px;
  text-align: left;
}
.orderlist-user > .dingji {
  text-align: center;
}
/* 商品价钱 */
.orderlist-price {
  color: #ed4014;
}
/* 商品价钱 */
.orderlist-item-price {
  margin-top: 10px;
  margin-bottom: 15px;
}
/* 商品规格 */
.orderlist-item-norm {
  margin-top: 10px;
}

.orderlist-item-num {
  margin-left: 10px;
}
/* 订单商品栏，图片 */
.orderlist-item-image {
  width: 75px;
  height: 75px;
}
.orderlist-item-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover; /*加上这个就可以实现需求效果*/
}
/* 订单商品栏，外层 */
.orderlist-item {
  width: 30%;
  padding: 10px;
}
/* 订单商品栏主体 */
.ordergoods {
  width: 100%;
  display: flex;
  justify-content: left;
  /* align-items: center; */
}
/* 订单表格主体 */
.orderlist-main {
  margin-bottom: 10px;
  border: 1px solid #f3f5f6;
  border-radius: 5px;
  background-color: white;
}

.orderlist-main:hover {
  border: 1px solid #39f;
  border-radius: 5px;
}
/* 订单每列头部 */
.orderlist-top {
  background-color: #f3f5f6;
  height: 65px;
  padding: 20px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.magein {
  background-color: #f3f5f6;
  height: 25px;
  padding: 0px 20px 20px 20px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.orderlist-time {
  color: #909399;
}

/* .orderlist-user > .avatar {
  height: 30px !important;
  width: 30px !important;
  display: block;
  float: left;
  border-radius: 50%;
  margin-right: 10px;
} */
/* 用户头像 */
.avatar {
  height: 30px !important;
  width: 30px !important;
  display: block;
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}

/* 订单身体部分 */
.orderlist-body {
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.app-order-title,
.order-datapic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.order-datapic {
  height: 50px;
}

.order-Datag {
  margin-bottom: 10px;
  margin-top: 10px;
  height: 42px;
  border-bottom: 3px solid #f3f5f6;
}

.index-button1 {
  position: absolute;
  left: 40px;
  top: 13px;
  width: 5vw;
  margin-left: 10px;
}
/* 订单表格头 */
.order-table-top {
  background-color: #f3f5f6;
  height: 42px;
  line-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.order-footer2 {
  background-color: #ecf0f5;
  height: 42px;
}

.order-footer1 {
  background-color: #fff;
  height: 20px;
}
/* 页码居中样式 */
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.avator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>